<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册 知识图谱</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
            height: 100%;
            overflow: hidden;
        }

        .container {
            display: flex;
            height: 100%;
        }

        .left-section {
            flex: 1;
            background: linear-gradient(135deg, #f5f5f7 0%, #e0e0e5 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .background-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .shape {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

        .product-showcase {
            z-index: 1;
            text-align: center;
            color: #1d1d1f;
        }

        .product-showcase img {
            max-width: 80%;
            height: auto;
            margin-bottom: 2rem;
        }

        .product-showcase h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .product-showcase p {
            font-size: 1.2rem;
            color: #86868b;
        }

        .right-section {
            flex: 1;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .login-container {
            width: 100%;
            max-width: 400px;
        }

        h1 {
            font-size: 2rem;
            text-align: center;
            margin-bottom: 2rem;
            color: #1d1d1f;
        }

        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
        }

        .tab {
            background: none;
            border: none;
            font-size: 1rem;
            color: #06c;
            cursor: pointer;
            padding: 0.5rem 1rem;
            transition: color 0.3s ease;
        }

        .tab.active {
            color: #1d1d1f;
            font-weight: 600;
        }

        .form {
            display: none;
        }

        .form.active {
            display: block;
        }

        input[type="username"],
        input[type="password"] {
            width: 93%;
            padding: 0.8rem;
            margin-bottom: 1rem;
            border: 1px solid #d2d2d7;
            border-radius: 6px;
            font-size: 1rem;
        }

        input[type="username"]:focus,
        input[type="password"]:focus {
            outline: none;
            border-color: #0071e3;
        }

        button[type="submit"] {
            width: 100%;
            padding: 0.8rem;
            background-color: #0071e3;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button[type="submit"]:hover {
            background-color: #0077ed;
        }

        .user-type-selector {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .user-type-option {
            flex: 1;
            text-align: center;
        }

        .user-type-option input[type="radio"] {
            display: none;
        }

        .user-type-option label {
            display: block;
            padding: 1rem;
            background-color: #f5f5f7;
            border: 2px solid #d2d2d7;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .user-type-option input[type="radio"]:checked + label {
            background-color: #e8f0fe;
            border-color: #0071e3;
            color: #0071e3;
        }

        .user-type-option label:hover {
            background-color: #e8f0fe;
        }

        #message {
            text-align: center;
            margin-top: 1rem;
            color: #06c;
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .left-section {
                display: none;
            }

            .right-section {
                padding: 1rem;
            }
        }
        .container-mid{
            display: flex;
            justify-content: center; /* 水平居中 */
        }

    </style>
</head>
<body>
<div class="container">
    <div class="left-section">
        <div class="background-shapes"></div>
        <div class="product-showcase">
<!--            <img src="../img/feature4.jpg" alt="Apple 产品展示">-->
            <h2>探索 知识图谱 世界</h2>
            <p>发现创新科技，体验卓越设计</p>
        </div>
    </div>
    <div class="right-section">
        <div class="login-container">
            <h1>欢迎</h1>
            <div class="tabs">
                <button class="tab active" data-tab="login">登录</button>
                <button class="tab" data-tab="register">注册</button>
            </div>
            <form id="loginForm" class="form active">
                <input type="username" placeholder="请输入用户名" required>
                <input type="password" placeholder="请输入密码" required>
                    <div class="user-type-selector ">
                        <div class="user-type-option">
                            <input type="radio" id="loginUser" name="loginUserType" value="user" checked>
                            <label for="loginUser">个人</label>
                        </div>
                        <div class="user-type-option">
                            <input type="radio" id="loginAdmin" name="loginUserType" value="admin">
                            <label for="loginAdmin">管理员</label>
                        </div>
                    </div>

                <button type="submit" class="tabs">登录</button>

            </form>
            <form id="registerForm" class="form">
                <input type="username" placeholder="用户名" required>
                <input type="password" placeholder="密码" required>
                <input type="password" placeholder="确认密码" required>
                <div class="user-type-selector" style=" display: none;">
                    <div class="user-type-option">
                        <input type="radio" id="registerUser" name="registerUserType" value="user" checked>
                        <label for="registerUser">个人</label>
                    </div>
                    <div class="user-type-option">
                        <input type="radio" id="registerAdmin" name="registerUserType" value="admin">
                        <label for="registerAdmin">管理员</label>
                    </div>
                </div>
                <button type="submit">注册</button>

            </form>
            <p id="message"></p>
        </div>
    </div>
</div>

<script>

    // 监测此时用户在登录还是在注册，并显示
    document.addEventListener('DOMContentLoaded', function() {
        // 获取欢迎信息元素
        var welcomeMessage = document.querySelector('.login-container h1');
        // 获取所有的tab按钮
        var tabs = document.querySelectorAll('.tabs button.tab');

        // 为每个tab按钮添加点击事件监听器
        tabs.forEach(function(tab) {
            tab.addEventListener('click', function() {
                // 获取当前点击的tab对应的表单ID
                var activeTab = this.getAttribute('data-tab');
                // 根据当前激活的表单更新欢迎信息
                if (activeTab === 'login') {
                    welcomeMessage.textContent = '欢迎登录';
                } else if (activeTab === 'register') {
                    welcomeMessage.textContent = '欢迎注册';
                }
                // 激活对应的表单
                document.querySelectorAll('.form').forEach(function(form) {
                    form.classList.remove('active');
                });
                document.getElementById(activeTab + 'Form').classList.add('active');
            });
        });

        // 默认设置欢迎信息
        welcomeMessage.textContent = '欢迎登录';
    });

    document.addEventListener('DOMContentLoaded', () => {
        const loginForm = document.getElementById('loginForm');
        const registerForm = document.getElementById('registerForm');
        const tabs = document.querySelectorAll('.tab');
        const message = document.getElementById('message');
        const backgroundShapes = document.querySelector('.background-shapes');

        // 创建背景形状
        function createBackgroundShapes() {
            for (let i = 0; i < 20; i++) {
                const shape = document.createElement('div');
                shape.classList.add('shape');
                const size = Math.random() * 100 + 50;
                shape.style.width = `${size}px`;
                shape.style.height = `${size}px`;
                shape.style.left = `${Math.random() * 100}%`;
                shape.style.top = `${Math.random() * 100}%`;
                shape.style.opacity = Math.random() * 0.5 + 0.1;
                backgroundShapes.appendChild(shape);
            }
        }

        createBackgroundShapes();

        // 切换表单
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                if (tab.dataset.tab === 'login') {
                    loginForm.classList.add('active');
                    registerForm.classList.remove('active');
                } else {
                    registerForm.classList.add('active');
                    loginForm.classList.remove('active');
                }
                message.textContent = '';
            });
        });

        // 处理登录表单提交
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = loginForm.querySelector('input[type="username"]').value;
            const password = loginForm.querySelector('input[type="password"]').value;
            const userRole = loginForm.querySelector('input[name="loginUserType"]:checked').value;

            fetch('/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&userRole=${encodeURIComponent(userRole)}`
            }).then(response => response.json())
                .then(data => {
                    if (data.success) {
                        message.textContent = '登录成功！';
                            if (data.userRole == 'admin'){
                                window.location.href = '/page';
                            }else{
                                window.location.href = '/page';
                            }
                    } else {
                        alert(data.error);
                    }
                });


            console.log('登录:', {username, password, userRole});

        });

        // 处理注册表单提交
        registerForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = registerForm.querySelector('input[type="username"]').value;
            const password = registerForm.querySelector('input[type="password"]').value;
            const confirmPassword = registerForm.querySelectorAll('input[type="password"]')[1].value;
            const userRole = registerForm.querySelector('input[name="registerUserType"]:checked').value;

            if (password !== confirmPassword) {
                message.textContent = '密码不匹配！';
                return;
            }

            fetch('/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&userRole=${encodeURIComponent(userRole)}`
            }).then(response => response.json())
                .then(data => {
                    if (data.success) {
                        message.textContent = 'Apple ID 创建成功！';
                        alert('注册成功，请登录！');
                        window.location.href='/'
                    } else {
                        alert(data.error);
                    }
                });

            console.log('注册:', {username, password, userRole});
            
        });
    });
</script>
</body>
</html>